<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--图片logo区域-->
            <div class="avatar_box">
                <img src="@/assets/images/logo.png">
            </div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form ref="formRef" class="login_form" :model="form" :rules="formRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <el-input prefix-icon="el-icon-key" v-model="form.code" placeholder="点击图片切换验证码"
                              style="width: 300px; margin-right: 10px"></el-input>
                    <img :src="captchaUrl" @click="getCaptcha" alt="" width="100" height="40" style="float: right;">
                </el-form-item>
                <!--按钮区域-->
                <el-form-item>
                    <el-button type="primary" class="btn" @click="formSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>

import {getCode, login} from "@/api/user";

export default {
    name: "LoginView",
    data() {
        return {
            captchaUrl: '',
            form: {
                uuid: '',
                username: 'admin',
                password: '111111',
                code: ''
            },
            formRules: {  // 表单验证规则对象
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            },

        }
    },
    methods: {
        formSubmit() {
            // 判定表单数据是否校验通过
            this.$refs.formRef.validate(val => {
                if (val) {
                    // 发送登录请求
                    login(this.form).then(resp => {
                        if (resp.code == 0) {
                            // 处理数据
                            let {token, nickName} = resp.data
                            sessionStorage.setItem("nickName", nickName)
                            sessionStorage.setItem("token", token);
                            this.$message({
                                type: 'success',
                                message: resp.message,
                                onClose: () => {
                                    // 跳转路由  index
                                    this.$router.push("/index").catch(err=>{})
                                }
                            })
                        } else {
                            this.$message.warning(resp.message)
                        }
                    })
                } else {
                    this.$message.warning("请填写完整的表单数据")
                }
            })

        },
        // 获取验证码
        getCaptcha() {
            //  data:image/png;base64,        this.form.uuid = uuid
            // 发送异步请求   Promise   resp 异步请求的响应结果
            getCode().then(resp => {
                let {img, uuid} = resp.data
                this.form.uuid = uuid
                this.captchaUrl = "data:image/png;base64," + img
            })
        }
    },
    created() {
        this.getCaptcha()
    }
}
</script>

<style scoped>
.login_container {
    background-color: rgb(26, 160, 148);
    height: 100vh;
}

.login_box {
    width: 450px;
    height: 380px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #fff;
}

.login_box > .avatar_box {
    height: 70px;
    width: 70px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 2px 2px 20px #2b4b6b;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

.avatar_box > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.3);
}

.avatar_box:hover {
    transform: translate(-50%, -50%) rotate(360deg);
    transition: transform 0.5s linear;
    cursor: pointer;
}

.btn {
    width: 100%;
}

.login_form {
    position: absolute;
    bottom: 30px;
    border-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}

</style>